// 自定义配置文件

const path = require('path')
// 按照UI标准设计稿 配置标准视口宽度 需要跟着设计稿来变 不是固定的
// flexible.js  动态计算出来当前html根fontSize的应该的大小 然后切换它的值
// 从而影响到项目中所有用到rem单位的地方 从而实现屏幕变化大小变化

// 视口单位 vw 是一个浏览器默认就知道的可以随着屏幕的宽度变化而自动变化的单位

// flexible.js  只是在vw当年兼容性很差的情况下的一个过渡单位 
// 现在vw在移动端兼容性良好 所以直接vw配合postcss后编译工具即可

// 这个适配方案一定不是必须的！！！ UI明确要求了要做等比缩放 我们才有必要使用这种方案
// 不是必须的方案 也不是最好的方案

// 更大的屏幕应该展示更多的有用的信息而不是展示更大的元素  px + flex


const pxToViewport = require('postcss-px-to-viewport')
const vw = pxToViewport({
  viewportWidth: 375
})
module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 约定：使用 @ 表示 src 文件所在路径
      '@': path.resolve(__dirname, 'src')
    }
  },
  style: {
    postcss: {
      mode: 'extends',
      loaderOptions: {
        postcssOptions: {
          ident: 'postcss',
          plugins: [vw]
        }
      }
    }
  }
}